<template>
	<view>
		<u-tabs :list="tabList" @click="tagClick" :current="current" lineColor="#2080F7" :lineWidth="12" :activeStyle="{
			        color: '#303133',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)',
					fontSize: '18px'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }"></u-tabs>
		<view class="p-15">
			<block v-if="active === 1 && page.follows.length > 0">
				<u-scroll-list :indicator="false">
					<block v-for="(follow,index) in page.follows" :key="index">
						<user-item :info="follow" />
					</block>
				</u-scroll-list>
			</block>
			<block v-if="page.list.length>0" v-for="c in page.list" :key="c.id">
				<circle-card :info="c" :active="active" @getList="getList"></circle-card>
			</block>
			<EmptyData v-else text="暂无动态" paddingTop="200px"></EmptyData>
		</view>
		<view class="post_btn" @click="post">
			<view class="_text">发布动态</view>
		</view>
	</view>
</template>

<script setup>
	//导入ref函数，用于定义响应式数据
	import {
		ref,
		reactive,
	} from 'vue'
	import circleCard from "@/components/circle_card.vue"
	import UserItem from '@/components/user-item.vue';
	import EmptyData from '@/components/EmptyData.vue'
	import {
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app"
	import store from '@/store'
	import {
		circleList,
	} from '@/api/circle.js'
	import {
		followList
	} from '@/api/follow.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const page = ref({
		list: [],
		follows: [],
		params: {
			userId: '',
			status: '1',
			ids: ''
		},
	})

	onLoad(() => {
		getList()
	})
	const active = ref(0)
	const tabList = [{
			name: '大厅',
			value: 0
		},
		{
			name: '关注',
			value: 1
		},
		{
			name: '我的',
			value: 2,

		},
	];
	const tagClick = ({
		value
	}) => {
		active.value = value
		if (value === 0) {
			page.value.params = {
				status: '1'
			}
			getList()
			return
		}
		if (value === 1) {
			getFollowList()
			return
		}
		if (value === 2) {
			page.value.params = {
				userId: store.getters.userId,
			}
			getList()
			return
		}
	}

	//获取动态列表
	function getList() {
		circleList(page.value.params).then(res => {
			page.value.list = res.rows
		})
	}
	//关注用户列表
	function getFollowList() {
		followList().then(resp => {
			page.value.follows = resp.data
			const ids = resp.data.map(item => item.otherId).join(',')
			if (!ids) {
				page.value.list = []
				return
			}
			page.value.params = {
				ids: ids,
				status: '1'
			}
			getList()
		})
	}

	function post() {
		uni.navigateTo({
			url: '/subPackages/circle/push_circle'
		})
	}
	onShareAppMessage(() => {
		return {
			title: '德宝乒乓球-' + '动态',
		}
	})
	onShareTimeline(() => {
		return {
			title: '德宝乒乓球-' + '动态',
		}
	})
	getFollowList()
</script>

<style lang="scss">
	page{
		background-color: #fff !important;
	}
	.post_btn {
		position: fixed;
		bottom: 60px;
		right: 40px;
		height: 40px;
		width: 40px;
		border-radius: 50%;
		background-color: #2080F7;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		padding: 8px;
		text-align: center;
		font-weight: bold;
		font-style: oblique;
		border: 4px solid #fff;
		font-size: 14px;
		box-shadow: 0px 0px 10px #2080F7;
		z-index: 999;

		._text {
			width: 28px;
			max-width: 28px;
		}
	}
</style>